<%= stylesheet_link_tag "mvs/_index" %>

<script type="text/javascript" charset="utf-8">
    bind_method(document, "keydown", goRoot);

    $(function () {
        var songNavbar = root.getWidgetById("song-navbar");
        var songWrapper = root.getWidgetById("song-wrapper");
        songWrapper.focus()

        // 在 navbar 上需要有一个默认的焦点, 每当 navbar 被 focus 时, 两者不相同, 才发生替换
        var currentSongTag = "<%= params[:song_tag_id] %>";
        songNavbar.on("focus", function (e) {
            if (currentSongTag !== e.target.con.dataset.song_tag_id) {
                // 赋值并发起 ajax 渲染
                currentSongTag = e.target.con.dataset.song_tag_id;
                $.ajax({
                    url: e.target.con.dataset.href + "&page=" + init_pages[currentSongTag],
                    dataType: "script"
                }).done(function () {
                    FocusEngine.render(); // 重新渲染组件树
                });
            }
        });

        // 记录页数
        var max_pages = <%= @song_tag_max_pages.to_json.html_safe %>;
        var init_pages = <%= @song_tag_init_pages.to_json.html_safe %>;
        <% if params[:page].to_i > 1%>
        init_pages["<%= params[:song_tag_id] %>"] = <%= params[:page] %>;
        <% end %>

        // 左37 上38 右39 下40
        songWrapper.on("keydown", function (e) {
            e =e || window.event;
            var keyValue = e.which || e.keyCode;
            var data = e.target.con.dataset
            switch (keyValue) {
                case 13:
                    Cookies.set('prev', "<%= mvs_path %>")
                    Cookies.set("<%= mvs_path %>", "?song_tag_id=" + currentSongTag + "&page=" + init_pages[currentSongTag] + "&row_index=" + data.row_index + "&item_index=" + data.item_index)
                    window.location.href = data.href
                    break;
                case 37:
                    // 如果是头两个元素, 页数-1, 发起请求
                    if (e.target.con.dataset.head) {
                        // 当前页码数不能用 MVVM 那一套, 所以麻烦一点
                        if (init_pages[currentSongTag] > 1) {
                            init_pages[currentSongTag] -= 1;
                            $.ajax({
                                url: "/mvs?song_tag_id=" + currentSongTag + "&page=" + init_pages[currentSongTag],
                                dataType: "script"
                            }).done(function () {
                                var targetTab = $("#song-tab-0").get(0);
                                FocusEngine.render(targetTab).focus();
                            });
                        }
                    }
                    break;
                case 39:
                    if (e.target.con.dataset.tail) {
                        if (init_pages[currentSongTag] < max_pages[currentSongTag]) {
                            init_pages[currentSongTag] += 1;
                            $.ajax({
                                url: "/mvs?song_tag_id=" + currentSongTag + "&page=" + init_pages[currentSongTag],
                                dataType: "script"
                            }).done(function () {
                                var targetTab = $("#song-tab-0").get(0);
                                FocusEngine.render(targetTab).focus();
                            });
                        }
                    }
                    break;
                default:
                    break;
            }
        });

        songWrapper.on("focus", function (e) {
            $(e.target.con).find(".marquee-truncate").marquee().trigger('forward').off('forward')
        });

        songWrapper.on("blur", function (e) {
            $(e.target.con).find(".marquee-truncate").trigger('reset').off('reset')
        });
    });
</script>

<div id="main" fe-role="Switch">
  <ul id="song-navbar" class="song-navbar" fe-role="Switch">
    <% @song_tags.each do |tag| %>
      <li data-song_tag_id="<%= tag.serial_id %>"
          data-href="<%= mvs_path(song_tag_id: tag.serial_id) %>"
          fe-role="Widget"
          fe-cfg="<%= "default_focus:yes" if tag.serial_id == params[:song_tag_id].to_i %>"
      >
        <%= tag[:name] %>
    <% end %>
  </ul>

  <div id="song-wrapper" class="song-wrapper" fe-role="Switch">
    <%= render "song_wrapper", song_rows: @songs %>
  </div>
</div>
